<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>贝塞尔曲线</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
    @property --x{
        syntax:'<length>';
        initial-value: 0px ;
        inherits: false;
    }
    @property --r{
        syntax:'<angle>';
        initial-value: 0deg ;
        inherits: false;
    }
    .ball{
        height: 40px;
        width: 40px;
        background-color: brown;
        position: relative;
        left: 50%;
        top: 400px;
        border-radius: 50%;
    }
    .ball{
        transform:rotate(var(--r)) translateX(var(--x)) ;
        animation: x 2s, r 8s;
        animation-timing-function: cubic-bezier(0.5, -1000, 0.5, 1000);
        animation-iteration-count: infinite;
    }
    @keyframes x {
        to{
            --x : 1px;
        }
    }
    @keyframes r {
        to{
            --r : 360deg;
        }
    }
</style>
</head>
    <body>
        <div class="ball"></div>
        <script>
            const ball=document.querySelector(".ball");
            ball.addEventListener('animationiteration ',function(){
                console.log(event)
            })
            let t=setInterval(()=>{
                console.log(ball);
                let x =  ball.getBoundingClientRect().left+18;
                let y = ball.getBoundingClientRect().top+18;
                createDot(x,y)
                console.log(x, y);
            },30)
            /* setTimeout(()=>{
                clearInterval(t);
            },6000) */

            function createDot(x,y){
                var son=document.createElement("div");
                son.style.width="7px";
                son.style.height="7px";
                son.style.background="red"
                son.style.position="absolute";
                son.style.top=y+"px";
                son.style.left=x+"px";
                son.style.borderRadius="50%";
                document.body.appendChild(son);
            }
        </script>
    </body>
</html>
